<template>
    <HeadImage :background="backPath">
        {{ disposition[0] }}
        <p slot="two" class="head">{{ disposition[1] }}</p>
    </HeadImage>
    <div class="greatPictures">
        <ul :class="{'title':true,
            'title_shadow':$store.state.nowTime==='moon',
            'content_shadow':$store.state.nowTime==='moon'}"
            :style="{'background': $store.state.nowTime==='moon' ? '#262525' : '#fff','color':'#f6f3f3'}">
            <li class="title_img" @click="imgType(null,-1)"
                :class="chooseType === -1 ? 'chooseType' : ''">全部图片</li>
            <li v-for="(item,index) in imageTypeName"
                class="title_img"
                :class="chooseType === index ? 'chooseType' : ''"
                @click="imgType(item,index)">{{ item }}</li>
        </ul>
        <ul :class="{'content':true,
                     'title_shadow':$store.state.nowTime==='moon',
                     'global_font_back':$store.state.nowTime==='moon',
                     'content_shadow':$store.state.nowTime==='moon'}">
            <img v-for="(item,index) in imgList"
                 v-if="skeleton"
                 :src="item.path" :title="item.description"
                 alt=""
                 class="content_img"
                 @click="switchBrowsing(index)">
            <div v-else v-for="(item,index) in imgList" class=" content_img circle_box" >
                    <CircleLoading></CircleLoading>
            </div>
        </ul>
    </div>


    <div class="next_box" @click="next">
        <div :class="{'next':true,
      'title_shadow':$store.state.nowTime==='moon' ? true : false,
      'content_shadow':$store.state.nowTime==='moon' ? true : false,}"
             :style="{'background': $store.state.nowTime==='moon' ? '#262525' : '#fff','color':'#8f8c8c',marginTop:'10px'}">
            <span v-if="next!=null">下一页</span>
            <span v-else>没有更多了</span>
        </div>
        <ul class="next_anim">
            <li>﹀</li>
            <li>﹀</li>
        </ul>
    </div>
    <ImageViewing :masking="browsing" :maskingImg="browsingImg_" :index="imgIndex" @closeBrowsing="switchBrowsing"></ImageViewing>
</template>

<script>
import HeadImage from "@/components/PublicComponents/HeadImage.vue";
import api from "@/api";
import SiteInformation from "@/components/PublicComponents/SiteInformation.vue";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";
import ImageViewing from "@/components/great/ImageViewing.vue";

export default {
    name: "GreatPictures",
    components: {ImageViewing, CircleLoading, SiteInformation, HeadImage},
    data() {
        return {
            backPath: "",
            imgList: "",
            image: {
                index: 1,
                condition: null,
            },
            imageTypeName: [],
            next: this.nextLimit,
            masking: false,
            pictureDisplay: "",
            index: 1,
            site_info: "",
            disposition: "",
            picture_: false,
            skeleton:false,
            browsing:false,
            imgIndex:0,
            browsingImg_:[],
            chooseType:-1,
        }
    },
    mounted() {
        let writing = JSON.parse(window.localStorage.getItem("DataContent"));
        if (writing) {
            this.disposition = writing[4].content.split("|||||");
            this.backPath = writing[3].content;
        }

        //获取所有的图片
        this.imgType(null,-1);

        //获取图片的类型
        this.getImgType();
    },
    watch:{
        imgList(newValue,oldValue){
            if(newValue!== ""){
                setTimeout(()=>{
                    this.skeleton = true
                },100)
            }
        }
    },
    methods: {
        imgAdd(item){
            this.browsingImg_ = [];
            for(let i=0;i<item.length;i++ ){
                this.browsingImg_.push(item[i].path)
            }
        },
        getImgType() {
            api.pictureType().then((res) => {
                this.imageTypeName = res.data.data
            })
        },
        switchBrowsing(index){
            this.browsing =  !this.browsing;
            this.imgIndex = index;
        },
        imgType(item,index) {
            this.chooseType = index;
            this.next = this.nextLimit;
            this.image.index = 1;

                this.image.condition = item
                api.pictureGetType(this.image).then((res) => {

                    console.log(res.data.data)
                    if (res.data.data.length < 12) {
                        this.next = null;
                    }
                    this.imgList = res.data.data;
                    this.imgAdd(this.imgList);
                })



        },
        nextLimit() {
            this.image.index += 1;
            if (this.image.type === "") {
                api.pictureGetAll(this.image.index).then((res) => {
                    if (res.data.data.records.length < 12) {
                        this.next = null;
                    }
                    this.imgList = this.imgList.concat(res.data.data.records);
                    this.imgAdd(  this.imgList);
                })
            } else {
                api.pictureGetType(this.image).then((res) => {
                    if (res.data.data.length < 12) {
                        this.next = null;
                    }
                    this.imgList = this.imgList.concat(res.data.data);
                    this.imgAdd(this.imgList);
                })
            }
        },

        _masking(item, index) {
            let body = document.body;
            body.style.overflow = 'hidden';
            this.masking = true;
            this.pictureDisplay = item;
            this.index = index;
        },
        img_l() {
            if (this.index === 0) {
                alert("已经是第一张图片了")
                return;
            } else {
                this.index -= 1;
                this.pictureDisplay = this.imgList[this.index].path;
            }
            this.picture_ = true;
            setTimeout(() => {
                this.picture_ = false;
            }, 200)

        },
        img_r() {
            if (this.index === this.imgList.length - 1) {
                alert("已经是最后一张图片了")
                return;
            } else {
                this.index += 1;
                this.pictureDisplay = this.imgList[this.index].path;
            }
            this.picture_ = true;
            setTimeout(() => {
                this.picture_ = false;
            }, 200)
        },
    },

}
</script>

<style scoped>
.chooseType{
   background: #3586f1 !important;
}
.circle_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius:5px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: rgba(246, 247, 248, 0.7);
}
body {
    height: 100%;
}

.head {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem
}

.head img {
    margin-left: 5px;
    width: 25px;
}

.title, .content {
    margin: auto;
    width: 800px;
    list-style: none;
    padding: 10px;
    margin-top:10px;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(80, 77, 77, 0.2), 0 6px 20px 0 rgba(103, 95, 95, 0.19);
}

.title_shadow, .content_shadow {
    box-shadow: 0 1px 1px 0 rgba(234, 228, 228, 0.2), 0 6px 20px 0 rgba(245, 240, 240, 0.19);
}

.title li {
    cursor: pointer;
    background: #abb6b4;
    border-radius: 3px;
    color: white;
    text-align: center;
    line-height: 30px;
}

.title{
    display: grid;
    grid-template-columns: repeat(5,minmax(60px,180px));
    justify-content: space-around;
    align-items: center;
    align-content: center;
    grid-gap: 10px 8px;
}

.content {
    min-height: 20vh;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4,22%);
    justify-content: space-around;
    justify-items: center;
    align-items: center;
    grid-gap: 15px 15px;
    color: #695f5f;
}

.content .content_img {
    width: 100%;
    aspect-ratio: 16/12;
    transition: all .2s;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation: images .5s ease-in-out 0s 1 forwards;
}

.content .content_img:last-child{
    margin-right: auto;
}

.content .content_img:hover {
    opacity: .6;
    transform: translateY(-2%);
}


@keyframes images {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}


.next {
    padding: 5px 10px;
    width: 100px;
    background: white;
    margin: auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    animation: next 1.5s ease-in-out 0s infinite forwards;
}

.next span {
    font-size: 14px;
    animation: images .3s ease-in-out 0s 1 forwards;
}

.next_anim {
    list-style: none;
    width: 100px;
    height: 30px;
    text-align: center;
    margin: auto;
    overflow: hidden;
    animation: next_anim 3s ease-in-out 0s infinite forwards;
}

.next_anim li {
    color: white;
    height: 8px;
    position: relative;
}

.next_box {
    background: transparent;
    min-width: 80px;
    margin: auto;
    cursor: pointer;
    padding-top: 20px;
    padding-bottom: 50px;
}

@keyframes next {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes next_anim {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}

@media (min-width: 0px) and (max-width: 820px) {
    .title, .content {
        width: 380px;
    }
    .title li {
        margin: 2px !important;
    }
    .title {
        padding: 2px;
    }
}


@keyframes picture_ {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@media (min-width: 0) and (max-width: 500px) {
    .content_img {
        width: 100% !important;
    }

}

</style>